<template>
  <div class="goods">
    <div class="container" v-if="code == 200">
      <goods-info
        :goodsImage="GoodsInfo.mainPictures"
        :name="GoodsInfo.name"
        :oldPrice="GoodsInfo.oldPrice"
        :price="GoodsInfo.price"
        :skus="GoodsInfo.skus"
        :specs="GoodsInfo.specs"
        :desc="GoodsInfo.desc"
        :goods="GoodsInfo"
      ></goods-info>
      <goods-relevant></goods-relevant>
      <goods-footer :details="GoodsInfo.details"></goods-footer>
    </div>
    <div class="img" v-else>
      <img src="@/assets/images/loading.gif" alt="" />
    </div>
  </div>
</template>
<script>
import GoodsInfo from "components/privately/Goods/GoodsInfo.vue";
import GoodsRelevant from "components/privately/Goods/GoodsRelevant.vue";
import GoodsFooter from "components/privately/Goods/GoodsFooter.vue";
import { getGoodsDetail } from "api/product";
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {},
  name: "index",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      GoodsInfo: [],
      code: 0,
    });

    watch(
      () => route.params.id,
      (n, o) => {
        if (!route.path.includes("product")) return false;
        getGoodsDetail(n).then((res) => {
          data.code = 200;
          data.GoodsInfo = res.result;
        });
      },
      { immediate: true }
    );
    return { ...toRefs(data) };
  },
  components: {
    GoodsInfo,
    GoodsFooter,
    GoodsRelevant,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.goods {
  background-color: #f5f5f5;
  padding-top: 20px;
  overflow: hidden;
  .img {
    background-color: #fff;
    width: 1240px;
    margin: 20px auto;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 80px;
    }
  }
}
</style>